<template>
  <div class="container">
    <div class="app-container">
      <!-- 员工管理页面 -->

      <!-- 左侧的树形结构和搜索框结构部分 -->
      <div class="left">
        <!-- 搜索框结构 -->
        <el-input
          style="margin-bottom: 10px"
          type="text"
          prefix-icon="el-icon-search"
          placeholder="输入员工姓名全员搜索"
          v-model="queryParams.keyWord"
          @input="handleSearch"
        />
        <!-- 树形组件 -->
        <el-tree
          :data="depts"
          :props="defaultProps"
          default-expand-all
          :highlight-current="true"
          node-key="deptId"
          ref="deptTree"
          @current-change="handleNodeClick"
        >
        </el-tree>
      </div>

      <!-- 右侧的table表格结构 -->
      <div class="right">
        <!-- 顶部放置三个按钮 -->
        <el-row class="opeate-tools" type="flex" justify="end">
          <el-button size="medium" type="primary" @click="addEmployee"
            >添加员工</el-button
          >
          <el-button
            size="medium"
            type="success"
            @click="showExcelDialog = true"
            ><i class="el-icon-upload">excel导入</i></el-button
          >

          <el-button size="medium" type="warning" @click="exportEmployee"
            ><i class="el-icon-download">excel导出</i></el-button
          >
        </el-row>

        <!-- 中间区域是表格组件 -->
        <el-table
          :data="employeeList"
          border
          stripe
          style="width: 100%"
          v-loading="loading"
        >
          <el-table-column
            prop="avatar"
            width="120px"
            label="头像"
            align="center"
          >
            <template slot-scope="{ row }">
              <!--可以直接使用imag标签，用来显示头像 -->
              <!-- <img :src="row.avatar" style="width: 100px; height: 100px" /> -->
              <el-avatar
                v-if="row.avatar"
                :src="row.avatar"
                :size="60"
              ></el-avatar>
              <!-- 也可以使用element-ui给我们提供的组件<el-avatar></el-avatar>组件来显示 -->
              <el-avatar v-else :size="60" class="username">
                {{ row.nickName.charAt(0) }}
              </el-avatar>
            </template>
          </el-table-column>
          <el-table-column prop="nickName" label="姓名" align="center">
          </el-table-column>
          <el-table-column prop="sex" label="性别" align="center">
            <template slot-scope="{ row }">
              <span v-if="row.sex === true">男</span>
              <span v-else>女</span>
            </template>
          </el-table-column>
          <el-table-column prop="age" label="年龄" sortable align="center">
          </el-table-column>
          <el-table-column
            prop="phoneNum"
            label="手机号"
            sortable
            align="center"
          >
          </el-table-column>
          <el-table-column prop="deptName" label="部门" align="center">
          </el-table-column>
          <el-table-column
            prop="employmentTime"
            label="入职时间"
            sortable
            align="center"
          >
          </el-table-column>
          <el-table-column label="操作" width="330px" align="center">
            <template v-slot="{ row }">
              <!-- 这里是跳转到一个新的页面，并且需要路由传参数 -->
              <el-button
                type="success"
                @click="$router.push(`/employee/details/${row.userId}`)"
                >修改</el-button
              >
              <el-button type="warning" @click="btnRole(row.userId)"
                >分配角色</el-button
              >
              <!-- popconfirm 气泡确认框组件 -->
              <el-popconfirm
                confirm-button-text="好的"
                cancel-button-text="不用了"
                icon="el-icon-info"
                icon-color="red"
                title="这是一段内容确定删除吗？"
                @onConfirm="btnDelete(row.userId)"
              >
                >
                <el-button
                  slot="reference"
                  type="danger"
                  size="medium"
                  icon="el-icon-delete"
                  style="margin-left: 10px"
                  >删除</el-button
                >
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>

        <!-- 底部的分页组件 -->
        <el-row
          type="flex"
          justify="center"
          align="middle"
          style="height: 60px"
        >
          <el-pagination
            background
            layout=" total,prev, pager, next"
            :total="total"
            :current-page="queryParams.page"
            :page-size="queryParams.pageSize"
            @current-change="handleCurrentChange"
          ></el-pagination>
        </el-row>
      </div>
    </div>
    <!-- 放置我们的导入组件 -->
    <ImportExcel
      :showExcelDialog.sync="showExcelDialog"
      @uploadOnSuccess="getEmployeeList"
    ></ImportExcel>
    <!-- 放置一个弹层组件 -->
    <el-dialog :visible.sync="showDialog" title="分配角色">
      <!--里面显示Checkbox多选框组价 v-model="roleIds" 绑定的是我们选中的角色id数组-->
      <el-checkbox-group v-model="roleIds">
        <el-checkbox
          v-for="item in roleList"
          :label="item.roleId"
          :key="item.roleId"
          >{{ item.roleName }}</el-checkbox
        >
      </el-checkbox-group>
      <!-- 确定和取消按钮 -->
      <el-row slot="footer" type="flex" justify="center">
        <el-button type="primary" @click="btnAssignRole">确定</el-button>
        <el-button @click="btnCancle">取消</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
import { getDepartment } from "@/api/department";
import { listToTree } from "@/utils/index";
import employeeApi from "@/api/employee";
// import FileSaver from "file-saver";
import ImportExcel from "@/views/employee/components/import-excel.vue";
import roleApi from "@/api/role.js";
export default {
  name: "Employee",
  components: { ImportExcel },
  data() {
    return {
      loading: true, //右边表格的加载状态
      showSearch: true, //是否显示搜索框
      depts: [], //组织数据
      defaultProps: {
        children: "children", //读取子节点的名字
        label: "deptName", //要显示的字段的名字
      },
      //查询参数对象
      queryParams: {
        deptId: 0, //部门id
        page: 1, //当前页码
        pageSize: 10, //每页多少条
        keyWord: null, //搜索的关键字
      },
      employeeList: [], //员工数据
      total: 0, //总条数
      showExcelDialog: false, //导入组件的弹层默认不显示
      showDialog: false, //分配角色弹层默认不显示
      roleList: [], //角色列表
      roleIds: [], //双向绑定选中的角色id
      currentUserId: null, //当前点击的用户id,后面分配角色的时候用得上
    };
  },
  created() {
    this.getDepartment();
  },
  methods: {
    //获取组织架构树形列表数据
    async getDepartment() {
      this.loading = true;
      //获取组织架构数据
      const result = await getDepartment();
      this.loading = false;
      //将数组通过我们的方法转为数组形式的树形列表结构
      this.depts = listToTree(result, 0);
      // console.log(this.depts[0]); //获取第一个节点
      this.queryParams.deptId = this.depts[0].deptId;
      // 树组件的渲染是异步的,需要先渲染完成之后再设置选中的节点
      this.$nextTick(() => {
        //设置选中的节点的状态setCurrentKey()是当前组件提供的
        // this.$refs.deptTree.setCurrentKey(this.depts[0].deptId);
        //默认绑定第一条（最顶层的部门deptId）
        this.$refs.deptTree.setCurrentKey(this.queryParams.deptId);
      });
      // 这个时候，记录已经记录了deptId
      this.getEmployeeList();
    },

    //选中节点时候触发的方法，element-ui-tree组件提供的 ,重新记录了deptId
    handleNodeClick(node) {
      // console.log(node);
      this.queryParams.deptId = node.deptId;
      //点击树的节点的时候，页码数page必须要重新设置为第一页
      this.queryParams.page = 1;
      // console.log(this.queryParams.deptId);
      //重新获取员工列表数据
      this.getEmployeeList();
    },

    // 获取员工列表信息
    async getEmployeeList() {
      const result = await employeeApi.getEmployeeList(this.queryParams);
      this.employeeList = result.records;
      this.total = result.total; //总条数
    },

    //切换页码的方法 element-ui 分页组价自带的回调方法的
    handleCurrentChange(newPage) {
      // console.log(newPage); 这里的newPage就是当前点击的新的页码 page
      //赋值新的页码
      //切换页码的时候，把当前页码赋值给this.queryParams.page
      this.queryParams.page = newPage;
      //重新获取数据
      this.getEmployeeList();
    },

    //点击搜索按钮 @input='handleSearch' 在输入值改变的时候触发，需要做节流，不然请求太频繁了
    handleSearch() {
      // console.log(this.queryParams.keyWord);
      // 定时器开始之前，清理上一次的定时器
      clearTimeout(this.timeId);
      //防抖:一定时间之内，执行一次,this.timeId是动态给vue赋值了一个属性
      this.timeId = setTimeout(() => {
        //重置页码数，不管之前是多少页，现在必须查询第一页
        this.queryParams.page = 1;
        //重新获取员工列表数据
        this.getEmployeeList();
      }, 1500);
    },

    //export 导出员工excel数据
    async exportEmployee() {
      // 这里返回的结果是一个Blob对象
      // 我们使用npm 包管理器 直接将Blob对象转为文件下载
      // 1. 导入npm包 npm install file-saver || yarn add file-saver
      const resultBlob = await employeeApi.exportEmployee();
      // console.log(resultBlob);
      //FileSaver.saveAs("blob对象", "文件名");
      const blob = new Blob([resultBlob], {
        type: "application/vnd.ms-excel",
      });
      const downloadUrl = URL.createObjectURL(blob);
      const link = document.createElement("a");
      link.href = downloadUrl;
      link.download = "员工信息.xls"; // 设置下载的文件名
      document.body.appendChild(link);
      link.click();
      URL.revokeObjectURL(downloadUrl);
    },

    //删除员工
    async btnDelete(userId) {
      // alert('确认删除'+userId)
      await employeeApi.deleteEmployee(userId);
      this.$message.success("删除成功");
      //重新获取员工列表数据
      this.getEmployeeList();
    },

    //添加员工
    addEmployee() {
      // this.$message.info("功能正在开发中");
      // this.$router.push("/employee/add");
      //跳转页面
      this.$router.push("/employee/details");
    },

    // 点击分配角色按钮弹出层
    async btnRole(userId) {
      //获取所有可用的角色列表
      const roleList = await roleApi.statusOkList();
      this.roleList = roleList;
      //记录当前用户的id，后面点击确定的时候需要存储到后端
      this.currentUserId = userId;
      //根据用户的userId获取用户已有的角色
      const result = await roleApi.findByRoles(userId);
      //把我们的获取到的roleId绑定给我们的roleIds
      //如果result 是一个数组，而且不为null的情况下
      //每次给个新的数据，往里面添加，覆盖上一次的数组中的数据
      const currentRoleIds = [];
      if (result !== null && Array.isArray(result)) {
        result.forEach((item) => {
          currentRoleIds.push(item.roleId);
        });
      }
      this.roleIds = currentRoleIds;
      //调整顺序，先获取接口数据，才会去弹窗
      this.showDialog = true;
    },

    //点击分配角色弹层中的取消按钮
    btnCancle() {
      this.showDialog = false;
    },

    //点击分配角色弹层中的确定按钮
    async btnAssignRole() {
      await employeeApi.assignRoles(this.currentUserId, this.roleIds);
      this.$message.success("分配角色成功");
      this.showDialog = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  background: #fff;
  display: flex;

  .left {
    width: 280px;
    padding: 20px;
    border-right: 1px solid #eaeef4;
  }

  .right {
    flex: 1;
    padding: 20px;

    .opeate-tools {
      margin: 10px;
    }

    .username {
      height: 30px;
      width: 30px;
      line-height: 30px;
      text-align: center;
      border-radius: 50%;
      color: #fff;
      background: #04c9be;
      font-size: 12px;
      display: inline-block;
    }
  }
}
</style>
